<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'text' : !secondshow}">面试反馈</span>
          <span v-if="secondshow" :class="{'text' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <div class="tabletitle" style="float: left;">
            <el-radio v-model="radio" @change="radioChange" label="候选人">候选人</el-radio>
            <el-radio v-model="radio" @change="radioChange" label="面试官">面试官</el-radio>
            <!-- <el-radio v-model="radio" @change="radioChange" label="未反馈">未反馈</el-radio> -->
          </div>
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
              <el-input
                style="width: 136px;"
                size="small"
                placeholder="请输入内容"
                v-model.trim="inputValue"
                @keyup.enter.native="searchMsg"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                  @click="searchMsg"
                ></i>
              </el-input>
              <div style="margin-left: 5px;">
                <el-button
                  class="download"
                  size="small"
                  @click="download"
                  v-if="radio!='未反馈'"
                  round>下载
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" class="feedback">
        <el-col :span="23">
          <el-table
          :key="Math.random()"
            class="resutable"
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            ref="multipleTable"
          >
            <el-table-column label="客户名称" width="120" v-if="radio!='未反馈'">
              <template slot-scope="scope">
                <!-- prop="name" -->
                <span style="cursor: pointer; color:#1198ff;" @click="viewdetail(scope.row)">
                  {{scope.row.customerName}}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="postName" label="需求名称" v-if="radio!='未反馈'">
           </el-table-column>
            <!-- 未反馈 -->
          <el-table-column prop="diffDay" v-if="radio == '未反馈'" label="未反馈时间"></el-table-column>           
          <el-table-column prop="type"  v-if="radio == '未反馈'" label="面试次数"></el-table-column>
          <el-table-column prop="name"  v-if="radio == '未反馈'" label="姓名"></el-table-column>
          <el-table-column prop="customerName" label="推送客户"  v-if="radio == '未反馈'"> </el-table-column>
          <el-table-column prop="postName" label="推送职位"  v-if="radio == '未反馈'"> </el-table-column> 
            <el-table-column prop="postLevel" label="职位级别">
            </el-table-column>
            <!-- 候选人 -->
            <el-table-column prop="name" v-if="radio == '候选人'" label="姓名"></el-table-column>
            
            <el-table-column prop="write"  v-if="radio == '候选人'" label="笔试"></el-table-column>
            <el-table-column prop="interviewNo"  v-if="radio == '候选人'" label="面谈次数"></el-table-column>
            <el-table-column prop="approximateTime" label="约面时间"  v-if="radio == '候选人'"> </el-table-column>
            <el-table-column prop="arriveTime" label="到达时间"  v-if="radio == '候选人'"> </el-table-column>
            <el-table-column prop="interviewTime"  label="面试时长"  v-if="radio == '候选人'"></el-table-column>
            <el-table-column prop="interviewResult"  v-if="radio == '候选人'" label="面试结果">
              </el-table-column>
          <!-- 面试官 -->
              <el-table-column v-if="radio == '面试官'" prop="interviewName" label="面试官"></el-table-column>
              <el-table-column label="约面时间" prop="interviewTime"  v-if="radio == '面试官'"></el-table-column>
            <el-table-column label="面试时长" prop="interviewLength"  v-if="radio == '面试官'"></el-table-column>
            <el-table-column label="是否有笔试" prop="isWrite" v-if="radio == '面试官'">
              <!-- <template slot-scope="scope">
                <div v-if="scope.row.isWrite == 'Y'">
                  <i class="el-icon-check"></i>
                </div>
              </template> -->
            </el-table-column>
            <el-table-column prop="interviewNature"  v-if="radio == '面试官'" label="面试官性格" width="200"></el-table-column>
            <el-table-column
              prop="question"
              label="面试中常问的问题"
              v-if="radio == '面试官'"
              width="300"
              show-overflow-tooltip
            ><template slot-scope="scope">
                <span>{{scope.row.question}}</span>
              </template></el-table-column>
            <el-table-column
              prop="element"
              label="面试官注重的要素"
              v-if="radio == '面试官'"
              width="300"
              show-overflow-tooltip
            ><template slot-scope="scope">
                <span>{{scope.row.element}}</span>
              </template></el-table-column>

              <!-- 未反馈区块 -->           
            <el-table-column prop="graduationTime"  v-if="radio == '未反馈'" label="毕业时间"></el-table-column>
            <el-table-column prop="birthday"  v-if="radio == '未反馈'" label="出生年月"></el-table-column>
            <el-table-column prop="phone"  v-if="radio == '未反馈'" label="联系方式"></el-table-column>
            <el-table-column prop="status"  v-if="radio == '未反馈'" label="离职状态"></el-table-column>
            <el-table-column prop="pusher"  v-if="radio == '未反馈'" label="推送人"></el-table-column>
            <el-table-column prop="candidateTime"  v-if="radio == '未反馈'" label="面试时间" width="150"></el-table-column>
            <el-table-column prop="isoperate"  v-if="radio == '未反馈'" label="操作"></el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>


       
            <!--            未选择表格当前行的弹出框-->
            <el-dialog
              title="错误"
              :visible.sync="editdialogVisible"
              width="30%"
              :before-close="handleClose"
              class="deletedialog"
            >
              <div style="text-align: center">
                <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
                  <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何面试反馈</span>
                </i>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button class="sure" round @click="handleOpen">确 定</el-button>
                <el-button round @click="handleClose" class="cancel">取 消</el-button>
              </span>
            </el-dialog>
            
          
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="type == 3">
      <detail-interview v-show="addShow"  :detail-code="detailcode" ref="interviewdetail" :radio="radio"></detail-interview>
    </div>
    <div v-if="type == 4">
      <edit-interview v-show="addShow"  :current-data="currentrow"  @getData="getData1" ref="editinterview" :radio="radio"></edit-interview>
    </div>
    <div v-if="type == 5">
      <add-interview v-show="addShow" @getData="getData1" ref="addinterview" :radio="radio"></add-interview>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import AddInterview from './addinterview.vue'
import EditInterview from './editinterview.vue'
import DetailInterview from './interviewdetail.vue'
import moment from "moment";

export default {
  components: {
      AddInterview,
      EditInterview,
      DetailInterview
    },
  data() {
    return {
      inputValue: "",
      days: "",
      secondshow: false,
      editdialogVisible: false,
      closedialogVisible: false,
      differcopierDialogVisible: false,
      radio: "候选人",
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      totalcount: 0,
      newcolor1: false,
      type: null,
      secondtitle: "",
      addShow: false,
      currentRow: null,
      feedBackVisible: false,
      dialogFormVisible: false,
      samemailDialogVisible: false,
      formLabelWidth: "120px",
      id: []
    };
  },
  created() {
    
    this.success();
  },
  methods: {
    //获取保存状态下的表格数据
      getData() {
        this.addShow = false;
        this.secondshow = false;
        this.currentRow = null;
        var form = {condition: this.searchword,pageNum : this.currentPage,pageSize : this.pagesize};
        if (this.radio == "候选人") {
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackBycandidate", form)
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;            
            }
          });}
        else if (this.radio == "面试官") {
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackByinterview", form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })}
        else if (this.radio == "未反馈") {
        axios
          .post(this.url + "/interviewFeedBack/selNoFeedByJf", form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })}
      },
      getData1() {
        this.addShow = false;
        this.secondshow = false;
        this.currentRow = null;
        this.currentPage = 1;
        var form = {condition: this.searchword,pageNum : this.currentPage,pageSize : this.pagesize};
        if (this.radio == "候选人") {
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackBycandidate", form)
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
            }
          });}
        else if (this.radio == "面试官") {
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackByinterview", form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })}
        else if (this.radio == "未反馈") {
        axios
          .post(this.url + "/interviewFeedBack/selNoFeedByJf", form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })}
      },
        addshow() {
        this.addShow = !this.addShow
        this.secondtitle = "新增反馈"
        this.secondshow = true
        this.type = 5;
        this.$nextTick(() => {
          if (this.$refs.uploadAdd) {
            this.$refs.uploadAdd.initdata();
            this.$refs.uploadAdd.clearData();
            this.$refs.uploadAdd.resetFields('form');
          }
        })
      },
       // 修改按钮点击
      editClick() {
        this.currentrow = null;
        if (this.currentRow == null) {
          document.documentElement.style.overflow = 'hidden';
          //未选择表格行，展示的弹出框
          this.editdialogVisible = !this.editdialogVisible;
        } else {
          document.documentElement.style.overflow = 'auto';
          this.addShow = !this.addShow
          this.secondtitle = "修改反馈"
          this.secondshow = !this.secondshow
          this.type = 4
          this.currentrow = this.currentRow;
          //修改子组件的事件触发
            if (this.$refs.editinterview) {
              this.$refs.editinterview.clearData();
              this.$refs.editinterview.resetFields('form');
            }
        }
      },
    editdown() {
        this.newcolor1 = true;
      },
      editup() {
        this.newcolor1 = false;
      },
      //从后台获取候选人表格的数据
    success() {
      axios
        .post(this.url + "/interviewFeedBack/getFeedBackBycandidate", {
          condition: this.inputValue,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        })
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            if (res.data.data !== null) {
              this.tableData = res.data.data.list;
              this.totalcount = res.data.data.total;
            }
          }
        });
    },
    //搜索
    searchMsg() {
      this.currentPage = 1;
      if (this.radio == "候选人") {
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackBycandidate", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      } else if (this.radio == "面试官") {
        // /feedbackalready
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackByinterview", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      }
      else if (this.radio == "未反馈") {
        // /feedbackalready
        axios
          .post(this.url + "/interviewFeedBack/selNoFeedByJf", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      }
    },
    //组件页面消失，回到当前页面
    tableshow(row) {
      this.addShow = false;
      this.secondshow = false;
      this.$refs.multipleTable.setCurrentRow(row);
      this.type = null;
      this.typechange1();
    },
   
    handleOpen() {
      this.editdialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    handleClose() {
      this.editdialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    handleClose1() {
      this.closedialogVisible = false;
      document.documentElement.style.overflow = "auto";
    },
    //查看反馈内容
    viewdetail(val) {
      this.detailcode = val;
      this.addShow = !this.addShow;
      this.secondtitle = "查看反馈内容";
      this.secondshow = !this.secondshow;
      this.type = 3;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.typechange1();
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    pagehandleCurrentChange(val) {
      this.currentPage = val;
      this.typechange1();
    },
    //单选框变化
    radioChange(val) {
      this.currentPage = 1;
      if (val == "候选人") {
        this.inputValue = "";
        this.unfeedback = false;
        this.checked = false;
        this.success();
      } else if (val == "面试官") {
        this.inputValue = "";
        this.checked = true;
        this.unfeedback = true;
        this.tableData = [];
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackByinterview", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      }
      else if (val == "未反馈") {
        this.inputValue = "";
        this.checked = true;
        this.unfeedback = true;
        this.tableData = [];
        axios
          .post(this.url + "/interviewFeedBack/selNoFeedByJf", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      }
    },
    typechange1() {
      if (this.radio == "候选人") {
        this.unfeedback = false;
        this.checked = false;
        this.success();
      } else if (this.radio == "面试官") {
        this.checked = true;
        this.unfeedback = true;
        axios
          .post(this.url + "/interviewFeedBack/getFeedBackByinterview", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      }
      else if (this.radio == "未反馈") {
        this.checked = true;
        this.unfeedback = true;
        axios
          .post(this.url + "/interviewFeedBack/selNoFeedByJf", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      }
    },
    // 下载按钮点击
      download() {
        if (this.radio == "候选人") {
          axios.post(this.url + "/interviewFeedBack/downExcelByCandidate", {}).then(res => {
            this.unlogin(res.data.code);
            if (res.data.code !== -1) {
              window.location.href = this.url + "/interviewFeedBack/downExcelByCandidate" 
            }
          })
        }else if (this.radio == "面试官") {
        axios.post(this.url + "/interviewFeedBack/downExcelByInterview", {}).then(res => {
            this.unlogin(res.data.code);
            if (res.data.code !== -1) {
              window.location.href = this.url + "/interviewFeedBack/downExcelByInterview" 
            }
          })
      }
      },

  },

  watch: {
    inputValue: function(val) {
      if (val == "") {
        this.typechange1();
      }
    }
  }
};
</script>
<style scoped>
.check {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    padding: 7px 15px !important;
  }
.download {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
  }
 .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
.newcon {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
.title {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  padding-left: 20px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.text {
  color: #1099ff;
}

.posttable {
  min-height: 700px;
  background-color: #fff;
}

.tabletitle {
  margin-left: 20px;
  height: 50px;
  line-height: 50px;
}

.back {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #6a76c7 0%, #8995e8 100%);
  padding: 7px 15px !important;
}

.back:hover {
  color: #fff !important;
}
.back:focus {
  color: #fff !important;
}
.colsure {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  padding: 7px 6px !important;
}

.colsure:hover {
  color: #fff !important;
}
.colsure:focus {
  color: #fff !important;
}
.send {
  width: 65px;
  height: 28px;
  opacity: 0.86;
  color: #fff;
  background: linear-gradient(to bottom, #feaa12 0%, #f28316 100%);
  padding: 7px 15px !important;
}

.send:hover {
  color: #fff !important;
}
.send:focus {
  color: #fff !important;
}

.resutable {
  background-color: #fff;
}

.pager {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}

.el-pagination {
  margin-left: 50%;
  transform: translateX(-50%);
}

.resumeLink {
  cursor: pointer;
  color: #1198ff;
  text-decoration: none;
}

.line {
  height: 1px;
  background-color: #c8c8c8;
  margin-top: 3px;
  margin-bottom: 20px;
}

.darkline {
  height: 1px;
  background-color: #4288c3;
  margin-top: 10px;
  margin-bottom: 20px;
}

.lightLine {
  height: 1px;
  background-color: #cccccc;
  margin-top: 10px;
  margin-bottom: 10px;
}

@media screen and (min-width: 600px) and (max-width: 1700px) {
  .dialogBox {
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

@media screen and (min-width: 1701px) and (max-width: 1920px) {
  .dialogBox {
    height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
  }
}
</style>
